import React, { useRef, useState, useEffect } from 'react';
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes, faSearch } from '@fortawesome/free-solid-svg-icons';
import PropTypes from 'prop-types';
import useKeyHandler from '../hooks/useKeyHandler';
import useIpcRenderer from '../hooks/useIpcRenderer';

// 自定义搜索区域的 div

let SearchDiv = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-between'
})`
  border-bottom: 1px solid #fff;
  height: 40px;
  span {
    color: #fff;
    padding: 0 10px;
    font: normal 16px/40px;
  }

  input {
    border: none;
    border-radius: 4px;
    margin-left: 10px;
  }
`;

const SearchFile = ({ title, onSearch }) => {
  const [searchActive, setSearchActive] = useState(false); // 搜索 / 关闭切换
  const [value, setValue] = useState(''); // 输入框的值
  const enterPressed = useKeyHandler(13); // enter
  const escPressed = useKeyHandler(27); // esc

  const oInput = useRef(null);

  const closeSearch = () => {
    setSearchActive(false);
    setValue('');

    // 当关闭搜索功能的时候，可以给它提供一个空字符，这样就没有满足条件的搜索
    // 结果，此时就能将原来列表数据重新展示出来
    onSearch('');
  };

  useEffect(() => {
    if (enterPressed && searchActive) {
      onSearch(value);
    }
    if (escPressed && searchActive) {
      closeSearch();
    }
  });

  useEffect(() => {
    if (searchActive) {
      // 切换搜索 输入框自动聚焦
      oInput.current.focus();
    }
  }, [searchActive]);

  // 主进程与渲染进程的事件通信
  useIpcRenderer({
    'execute-search-file': () => {
      setSearchActive(true);
    }
  });

  return (
    <>
      {!searchActive && (
        <>
          <SearchDiv>
            <span>{title}</span>
            <span onClick={() => setSearchActive(true)}>
              <FontAwesomeIcon icon={faSearch} />
            </span>
          </SearchDiv>
        </>
      )}
      {searchActive && (
        <>
          <SearchDiv>
            <input value={value} ref={oInput} onChange={e => setValue(e.target.value)} />
            <span onClick={closeSearch}>
              <FontAwesomeIcon icon={faTimes} />
            </span>
          </SearchDiv>
        </>
      )}
    </>
  );
};

SearchFile.propTypes = {
  title: PropTypes.string,
  onSearch: PropTypes.func.isRequired
};

SearchFile.defaultProps = {
  title: '文档列表'
};

export default SearchFile;
